React Portals: Modals und Tooltips für eine verbesserte UX meistern

In der modernen Webentwicklung ist die Gestaltung intuitiver und ansprechender Benutzeroberflächen von größter Bedeutung. React, eine beliebte JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen, bietet verschiedene Werkzeuge und Techniken, um dies zu erreichen. Eines dieser leistungsstarken Werkzeuge sind React Portals. Dieser Blogbeitrag taucht in die Welt der React Portals ein und konzentriert sich auf deren Anwendung bei der Erstellung barrierefreier und optisch ansprechender Modals und Tooltips.

Was sind React Portals?

React Portals bieten eine Möglichkeit, die Children einer Komponente in einen DOM-Knoten zu rendern, der außerhalb der DOM-Hierarchie der Elternkomponente existiert. Einfacher ausgedrückt, ermöglichen sie es Ihnen, aus dem Standard-React-Komponentenbaum auszubrechen und Elemente direkt in einen anderen Teil der HTML-Struktur einzufügen. Dies ist besonders nützlich für Situationen, in denen Sie den Stapelkontext (stacking context) steuern oder Elemente außerhalb der Grenzen ihres übergeordneten Containers positionieren müssen.

Traditionell werden React-Komponenten als Children ihrer Elternkomponenten innerhalb des DOM gerendert. Dies kann manchmal zu Styling- und Layout-Herausforderungen führen, insbesondere bei Elementen wie Modals oder Tooltips, die über anderen Inhalten erscheinen oder relativ zum Viewport positioniert werden müssen. React Portals bieten eine Lösung, indem sie es diesen Elementen ermöglichen, direkt in einen anderen Teil des DOM-Baums gerendert zu werden und diese Einschränkungen zu umgehen.

Warum sollte man React Portals verwenden?

Mehrere entscheidende Vorteile machen React Portals zu einem wertvollen Werkzeug in Ihrem React-Entwicklungsarsenal:

• Verbessertes Styling und Layout: Portals ermöglichen es Ihnen, Elemente außerhalb des Containers ihrer Eltern zu positionieren und so Styling-Probleme zu überwinden, die durch overflow: hidden, z-index-Beschränkungen oder komplexe Layout-Einschränkungen verursacht werden. Stellen Sie sich ein Modal vor, das den gesamten Bildschirm abdecken muss, selbst wenn sein übergeordneter Container overflow: hidden gesetzt hat. Portals ermöglichen es Ihnen, das Modal direkt in den body zu rendern und diese Einschränkung zu umgehen.
• Verbesserte Barrierefreiheit: Portals sind entscheidend für die Barrierefreiheit, insbesondere bei Modals. Das Rendern des Modal-Inhalts direkt in den body ermöglicht es Ihnen, das Fokus-Trapping einfach zu verwalten und sicherzustellen, dass Benutzer, die Screenreader oder Tastaturnavigation verwenden, innerhalb des Modals bleiben, während es geöffnet ist. Dies ist unerlässlich für eine nahtlose und barrierefreie Benutzererfahrung.
• Sauberere Komponentenstruktur: Indem Sie Modal- oder Tooltip-Inhalte außerhalb des Hauptkomponentenbaums rendern, können Sie Ihre Komponentenstruktur sauberer und übersichtlicher halten. Diese Trennung der Belange (separation of concerns) kann Ihren Code leichter lesbar, verständlich und wartbar machen.
• Vermeidung von Problemen mit dem Stapelkontext: Stapelkontexte in CSS können bekanntermaßen schwer zu verwalten sein. Portals helfen Ihnen, diese Probleme zu vermeiden, indem sie es Ihnen ermöglichen, Elemente direkt in das Stammverzeichnis des DOM zu rendern und sicherzustellen, dass sie immer korrekt relativ zu anderen Elementen auf der Seite positioniert sind.

Implementierung von Modals mit React Portals

Modals sind ein gängiges UI-Muster, um wichtige Informationen anzuzeigen oder Benutzer zur Eingabe aufzufordern. Lassen Sie uns untersuchen, wie man ein Modal mit React Portals erstellt.

1. Erstellen des Portal-Stammelements

Zuerst müssen Sie einen DOM-Knoten erstellen, in dem das Modal gerendert wird. Dies geschieht normalerweise durch Hinzufügen eines div-Elements mit einer bestimmten ID zu Ihrer HTML-Datei (normalerweise im body):

            <div id="modal-root"></div>
            

              
                Copy
              
            
          

2. Erstellen der Modal-Komponente

Als Nächstes erstellen Sie eine React-Komponente, die das Modal darstellt. Diese Komponente enthält den Inhalt und die Logik des Modals.

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Schließen</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Erklärung:

• isOpen-Prop: Bestimmt, ob das Modal sichtbar ist.
• onClose-Prop: Eine Funktion zum Schließen des Modals.
• children-Prop: Der Inhalt, der innerhalb des Modals angezeigt werden soll.
• modalRoot-Ref: Referenziert den DOM-Knoten, in dem das Modal gerendert wird (#modal-root).
• useEffect-Hook: Stellt sicher, dass das Modal erst nach dem Mounten der Komponente gerendert wird, um Probleme zu vermeiden, bei denen das Portal-Stammelement nicht sofort verfügbar ist.
• ReactDOM.createPortal: Dies ist der Schlüssel zur Verwendung von React Portals. Es benötigt zwei Argumente: das zu rendernde React-Element (modalContent) und den DOM-Knoten, in dem es gerendert werden soll (modalRoot.current).
• Klicken auf das Overlay: Schließt das Modal. Wir verwenden e.stopPropagation() auf dem modal-content-Div, um zu verhindern, dass Klicks innerhalb des Modals es schließen.

3. Verwendung der Modal-Komponente

Jetzt können Sie die Modal-Komponente in Ihrer Anwendung verwenden:

            import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Modal öffnen</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modal-Inhalt</h2>
        <p>Dies ist der Inhalt des Modals.</p>
      </Modal>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

Dieses Beispiel zeigt, wie die Sichtbarkeit des Modals mit der isOpen-Prop und den Funktionen openModal und closeModal gesteuert wird. Der Inhalt innerhalb der <Modal>-Tags wird innerhalb des Modals gerendert.

4. Styling des Modals

Fügen Sie CSS-Stile hinzu, um das Modal zu positionieren und zu gestalten. Hier ist ein grundlegendes Beispiel:

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Stellt sicher, dass es über anderen Inhalten liegt */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

Erklärung des CSS:

• position: fixed: Stellt sicher, dass das Modal den gesamten Viewport abdeckt, unabhängig vom Scrollen.
• background-color: rgba(0, 0, 0, 0.5): Erstellt ein halbtransparentes Overlay hinter dem Modal.
• display: flex, justify-content: center, align-items: center: Zentriert das Modal horizontal und vertikal.
• z-index: 1000: Stellt sicher, dass das Modal über allen anderen Elementen auf der Seite gerendert wird.

5. Überlegungen zur Barrierefreiheit bei Modals

Barrierefreiheit ist bei der Implementierung von Modals von entscheidender Bedeutung. Hier sind einige wichtige Überlegungen:

• Fokus-Management: Wenn das Modal geöffnet wird, sollte der Fokus automatisch auf ein Element innerhalb des Modals verschoben werden (z. B. das erste Eingabefeld oder eine Schließen-Schaltfläche). Wenn das Modal geschlossen wird, sollte der Fokus auf das Element zurückkehren, das das Öffnen des Modals ausgelöst hat. Dies wird oft mit dem useRef-Hook von React erreicht, um das zuvor fokussierte Element zu speichern.
• Tastaturnavigation: Stellen Sie sicher, dass Benutzer das Modal mit der Tastatur (Tab-Taste) navigieren können. Der Fokus sollte innerhalb des Modals gefangen sein, um zu verhindern, dass Benutzer versehentlich daraus heraustabben. Bibliotheken wie react-focus-lock können dabei helfen.
• ARIA-Attribute: Verwenden Sie ARIA-Attribute, um Screenreadern semantische Informationen über das Modal bereitzustellen. Verwenden Sie beispielsweise aria-modal="true" auf dem Modal-Container und aria-label oder aria-labelledby, um eine beschreibende Beschriftung für das Modal bereitzustellen.
• Schließmechanismus: Bieten Sie mehrere Möglichkeiten zum Schließen des Modals an, z. B. eine Schließen-Schaltfläche, Klicken auf das Overlay oder Drücken der Escape-Taste.

Beispiel für Fokus-Management (mit useRef):

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));
  const firstFocusableElement = useRef(null);
  const previouslyFocusedElement = useRef(null);

  useEffect(() => {
    setMounted(true);
    if (isOpen) {
      previouslyFocusedElement.current = document.activeElement;
      if (firstFocusableElement.current) {
        firstFocusableElement.current.focus();
      }

      const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
          onClose();
        }
      };

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        if (previouslyFocusedElement.current) {
          previouslyFocusedElement.current.focus();
        }
      };
    }

    return () => setMounted(false);
  }, [isOpen, onClose]);


  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2>Modal-Inhalt</h2>
        <p>Dies ist der Inhalt des Modals.</p>
        <input type="text" ref={firstFocusableElement} /> <!-- Erstes fokussierbares Element -->
        <button onClick={onClose}>Schließen</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Erklärung des Codes für das Fokus-Management:

• previouslyFocusedElement.current: Speichert das Element, das den Fokus hatte, bevor das Modal geöffnet wurde.
• firstFocusableElement.current: Verweist auf das erste fokussierbare Element *innerhalb* des Modals (in diesem Beispiel ein Texteingabefeld).
• Wenn das Modal geöffnet wird (isOpen ist true):
  • Das aktuell fokussierte Element wird gespeichert.
  • Der Fokus wird auf firstFocusableElement.current verschoben.
  • Ein Event-Listener wird hinzugefügt, um auf die Escape-Taste zu lauschen und das Modal zu schließen.
• Wenn das Modal geschlossen wird (Aufräumfunktion):
  • Der Event-Listener für die Escape-Taste wird entfernt.
  • Der Fokus wird auf das zuvor fokussierte Element zurückgesetzt.

Implementierung von Tooltips mit React Portals

Tooltips sind kleine, informative Pop-ups, die erscheinen, wenn ein Benutzer mit der Maus über ein Element fährt. React Portals können verwendet werden, um Tooltips zu erstellen, die korrekt positioniert sind, unabhängig vom Styling oder Layout des übergeordneten Elements.

1. Erstellen des Portal-Stammelements (falls noch nicht vorhanden)

Wenn Sie noch kein Portal-Stammelement für Modals erstellt haben, fügen Sie ein div-Element mit einer bestimmten ID zu Ihrer HTML-Datei hinzu (normalerweise im body):

            <div id="tooltip-root"></div>
            

              
                Copy
              
            
          

2. Erstellen der Tooltip-Komponente

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Tooltip = ({ text, children, position = 'top' }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [positionStyle, setPositionStyle] = useState({});
  const [mounted, setMounted] = useState(false);

  const tooltipRoot = useRef(document.getElementById('tooltip-root'));
  const tooltipRef = useRef(null);
  const triggerRef = useRef(null);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  const handleMouseEnter = () => {
    setIsVisible(true);
    updatePosition();
  };

  const handleMouseLeave = () => {
    setIsVisible(false);
  };

  const updatePosition = () => {
    if (!triggerRef.current || !tooltipRef.current) return;

    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    let top = 0;
    let left = 0;

    switch (position) {
      case 'top':
        top = triggerRect.top - tooltipRect.height - 5; // 5px Abstand
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'bottom':
        top = triggerRect.bottom + 5;
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'left':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.left - tooltipRect.width - 5;
        break;
      case 'right':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.right + 5;
        break;
      default:
        break;
    }

    setPositionStyle({
      top: `${top}px`,
      left: `${left}px`,
    });
  };

  const tooltipContent = isVisible && (
    <div className="tooltip" style={positionStyle} ref={tooltipRef}>
      {text}
    </div>
  );

  return (
    <span
      ref={triggerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {mounted && tooltipRoot.current ? ReactDOM.createPortal(tooltipContent, tooltipRoot.current) : null}
    </span>
  );
};

export default Tooltip;

            

              
                Copy
              
            
          

Erklärung:

• text-Prop: Der Text, der im Tooltip angezeigt werden soll.
• children-Prop: Das Element, das den Tooltip auslöst (das Element, über das der Benutzer fährt).
• position-Prop: Die Position des Tooltips relativ zum Auslöser-Element ('top', 'bottom', 'left', 'right'). Standard ist 'top'.
• isVisible-State: Steuert die Sichtbarkeit des Tooltips.
• tooltipRoot-Ref: Referenziert den DOM-Knoten, in dem der Tooltip gerendert wird (#tooltip-root).
• tooltipRef-Ref: Referenziert das Tooltip-Element selbst, um dessen Abmessungen zu berechnen.
• triggerRef-Ref: Referenziert das Element, das den Tooltip auslöst (die children).
• handleMouseEnter und handleMouseLeave: Event-Handler für das Bewegen der Maus über das Auslöser-Element.
• updatePosition: Berechnet die korrekte Position des Tooltips basierend auf der position-Prop und den Abmessungen des Auslöser- und Tooltip-Elements. Es verwendet getBoundingClientRect(), um die Position und die Abmessungen der Elemente relativ zum Viewport zu erhalten.
• ReactDOM.createPortal: Rendert den Tooltip-Inhalt in den tooltipRoot.

3. Verwendung der Tooltip-Komponente

            import React from 'react';
import Tooltip from './Tooltip';

const App = () => {
  return (
    <div>
      <p>
        Fahren Sie über diesen <Tooltip text="Dies ist ein Tooltip!\nMit mehreren Zeilen."
position="bottom">Text</Tooltip>, um einen Tooltip zu sehen.
      </p>

      <button>
        Fahren Sie <Tooltip text="Button-Tooltip" position="top">hier</Tooltip> für einen Tooltip.
      </button>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

Dieses Beispiel zeigt, wie Sie die Tooltip-Komponente verwenden, um Tooltips zu Text und Schaltflächen hinzuzufügen. Sie können den Text und die Position des Tooltips mit den text- und position-Props anpassen.

4. Styling des Tooltips

Fügen Sie CSS-Stile hinzu, um den Tooltip zu positionieren und zu gestalten. Hier ist ein grundlegendes Beispiel:

            .tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Dunkler Hintergrund */
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000; /* Stellt sicher, dass es über anderen Inhalten liegt */
  white-space: pre-line; /* Berücksichtigt Zeilenumbrüche in der text-Prop */
}

            

              
                Copy
              
            
          

Erklärung des CSS:

• position: absolute: Positioniert den Tooltip relativ zum tooltip-root. Die Funktion updatePosition in der React-Komponente berechnet die genauen top- und left-Werte, um den Tooltip in der Nähe des Auslöser-Elements zu positionieren.
• background-color: rgba(0, 0, 0, 0.8): Erstellt einen leicht transparenten dunklen Hintergrund für den Tooltip.
• white-space: pre-line: Dies ist wichtig, um Zeilenumbrüche zu erhalten, die Sie möglicherweise in die text-Prop aufnehmen. Ohne dies würde der Tooltip-Text in einer einzigen Zeile erscheinen.

Globale Überlegungen und Best Practices

Bei der Entwicklung von React-Anwendungen für ein globales Publikum sollten Sie diese Best Practices berücksichtigen:

• Internationalisierung (i18n): Verwenden Sie eine Bibliothek wie react-i18next oder FormatJS, um Übersetzungen und Lokalisierung zu handhaben. Dies ermöglicht es Ihnen, Ihre Anwendung leicht an verschiedene Sprachen und Regionen anzupassen. Stellen Sie bei Modals und Tooltips sicher, dass der Textinhalt korrekt übersetzt wird.
• Rechts-nach-Links (RTL)-Unterstützung: Stellen Sie bei Sprachen, die von rechts nach links gelesen werden (z. B. Arabisch, Hebräisch), sicher, dass Ihre Modals und Tooltips korrekt angezeigt werden. Möglicherweise müssen Sie die Positionierung und das Styling von Elementen an RTL-Layouts anpassen. Logische CSS-Eigenschaften (z. B. margin-inline-start anstelle von margin-left) können hierbei hilfreich sein.
• Kulturelle Sensibilität: Achten Sie bei der Gestaltung Ihrer Modals und Tooltips auf kulturelle Unterschiede. Vermeiden Sie die Verwendung von Bildern oder Symbolen, die in bestimmten Kulturen beleidigend oder unangemessen sein könnten.
• Zeitzonen und Datumsformate: Wenn Ihre Modals oder Tooltips Daten oder Uhrzeiten anzeigen, stellen Sie sicher, dass sie entsprechend der Locale und Zeitzone des Benutzers formatiert sind. Bibliotheken wie moment.js (obwohl veraltet, immer noch weit verbreitet) oder date-fns können dabei helfen.
• Barrierefreiheit für unterschiedliche Fähigkeiten: Halten Sie sich an die Richtlinien zur Barrierefreiheit (WCAG), um sicherzustellen, dass Ihre Modals und Tooltips von Menschen mit Behinderungen genutzt werden können. Dazu gehören die Bereitstellung von Alternativtexten für Bilder, die Gewährleistung eines ausreichenden Farbkontrasts und die Unterstützung der Tastaturnavigation.

Fazit

React Portals sind ein leistungsstarkes Werkzeug zur Erstellung flexibler und barrierefreier Benutzeroberflächen. Wenn Sie verstehen, wie Sie sie effektiv einsetzen, können Sie Modals und Tooltips erstellen, die die Benutzererfahrung verbessern und die Struktur und Wartbarkeit Ihrer React-Anwendungen optimieren. Denken Sie daran, bei der Entwicklung für ein vielfältiges Publikum der Barrierefreiheit und globalen Überlegungen Priorität einzuräumen, um sicherzustellen, dass Ihre Anwendungen inklusiv und für alle nutzbar sind.

Weiterführende Lektüre

• React Portals Dokumentation
• Richtlinien für barrierefreie Webinhalte (WCAG)
• react-i18next